<template>
  <div class="star">
    <span class="" v-for="num of nums" :key="num">
      <i class="iconfont" v-if="score - num >= 1">&#xe60d;</i>
      <i class="iconfont" v-else-if="score - num >= 0.5">&#xe6f0;</i>
      <i class="iconfont gray-star" v-else>&#xe60d;</i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Star',
  props: {
    score: Number
  },
  data () {
    return {
      nums: [0, 1, 2, 3, 4]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .star
    display inline-block
    line-height 1
    font-size 0
    .iconfont
      font-size .25rem
      margin 0 .02rem
      color #ffad00
    .gray-star
      color #dddddd
</style>
